<template>
    <div class="index">
        <div class="i-input">
            <div class="title">成绩查分系统</div>
            <div class="input-div">
                <div class="name">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mingzi"></use>
                    </svg>
                    <input type="text" placeholder="请输入姓名" v-model="form.name">
                    <svg v-show="form.name" class="icon delete" aria-hidden="true" @click="clear('name')">
                        <use xlink:href="#icon-delete2"></use>
                    </svg>
                </div>
                <div class="phone">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <input type="text" placeholder="请输入手机号码" v-model="form.phoneNo">
                    <svg v-show="form.phoneNo" class="icon delete" aria-hidden="true" @click="clear('phone')">
                        <use xlink:href="#icon-delete2"></use>
                    </svg>
                </div>
            </div>
            <div class="check-btn" @click="getReports">成绩查询</div>
        </div>
        <img class="logo" src="../../assets/img/report/logo.png" alt="">
    </div>
</template>
<script>
import io from '../../lib/io'
export default {
    name: 'h-index',
    data() {
        return {
            form: {
                pageIndex: 1,
                pageSize: 1000000,
                phoneNo: '',
                name: '',
                sysCode:'0003',
            }
        }
    },
    created() {
        document.title = '成绩查分系统'
    },
    methods: {
        getReports() {
            if (!this.form.name.trim()) {
                alert('请输入姓名')
                return false
            }
            if (!(/^1[3456789]\d{9}$/.test(this.form.phoneNo))) {
                alert('请输入正确手机号')
                return false
            }
            io.post(io.reportListOfStudent, this.form, (res) => {
                if (res.success) {
                    if (res.data.list.length === 1) {
                        this.$router.push({ path: '/h-result', query: { reportId: res.data.list[0].reportId } })
                    }else{
                        this.$router.push({ path: '/h-report-list', query: { name: this.form.name, phoneNo: this.form.phoneNo } })
                    }
                }
            })
        },
        clear(type){
            switch (type){
                case 'name':
                    this.form.name=''
                    break
                case 'phone':
                    this.form.phoneNo=''
                    break
                default:
                    break
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.index
    min-height 100%
    background url('../../assets/img/report/i-bg.png')
    background-size 100%
    background-repeat no-repeat
    position relative
    text-align center
    padding-top 1.96rem
    background-color #F8FBFC
    box-sizing border-box
.i-input
    .title
        font-size .68rem
        color #ffffff
        font-weight bold
    .input-div
        height 2rem
        width 6.3rem
        box-sizing border-box
        padding 0 .2rem
        background #E9ECFC
        margin auto
        margin-top .55rem
        margin-bottom .4rem
        position relative
        div
            height 1rem
            display flex
            align-items center
            input 
                background #E9ECFC
                font-size .28rem
                margin-left .2rem
                width 4rem
                color #6B6969
            .icon
                color #C1C2C6
                font-size .43rem
        .name
            border-bottom .01rem solid #B0ADAD 
        .phone
            .icon
                font-size .34rem
        .delete
            font-size .3rem !important
            position absolute
            right .75rem
    .check-btn
        width 6.3rem
        height 1rem
        display flex
        align-items center
        justify-content center
        background #145DA0
        font-size .32rem
        color #F8FBFC
        margin auto
.logo
    position relative 
    top 4rem
</style>

